<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import dayjs from 'dayjs';
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";

export default {
  components: {},
  name: "chartlinechartquanwangzz",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      markLineData: ""
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.bigScreen": {
      handler: function(n, o) {
        let n_tmp = n;
        let g_bigscreen_data_arr = n_tmp.filter(item => {
          if (item.attrName == "echart_plan_heat") {
            return true;
          }
        });
        this.markLineData = g_bigscreen_data_arr[0].attrValue;
      }
    },

    "$store.state.daping.queryDbPipenetColSa_003qc_zz": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {
    loadData(rs) {
      let res = rs[0].data
      var scale = this.$root.setting.scale;
      let xData = res.map(v => v.aligntime.split(' ')[1].substr(0,5))
      let rlData = res.map(v => Number(v.sa_003qc / 3.6).toFixed(2))
      let mrlData = []
      if (rs[1].data.length != 0) {
         mrlData = res.map(v => rs[1].data[0].totalPlanHeat)
      }
      let today8Clock = dayjs().format('YYYY-MM-DD 08:00:00')
      if (rs.length === 3) {
        mrlData = res.map(v => {
          if (new Date(v.aligntime).getTime() < new Date(today8Clock)) {
            if (rs[1].data.length == 0) {
              return 0
            }else{
              return rs[1].data[0].totalPlanHeat
            }
          } else {
            if (rs[2].data.length == 0) {
              return 0
            }else{
              return rs[2].data[0].totalPlanHeat
            }
          }
        })
      }
      var option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontWeight: "normal",
            fontSize: 30 * scale,
          }
        },
        grid: {
          //统计图距离边缘的距离
          bottom: "0%",
          top: "20%",
          left: "5%",
          right: "10%",
          containLabel: true,
        },
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     realtime: true,
        //     start: 0,
        //     end: 100,
        //   }
        // ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#F5F5F5", //x轴颜色
              },
            },
            axisLabel: {
              textStyle: {
                color: "#F5F5F5",
                fontSize: 30 * scale,
              },
              showMaxLabel: true
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#F5F5F5",
                fontSize: 30 * scale,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            data: rlData,
            name: "供热量",
            symbolSize: 0,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                color: "#FDB76A",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: "#FDB76A", //tooltip里点的颜色
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#FDB76A80",
                    },
                    {
                      offset: 1,
                      color: "#FDB76A00",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)",
                shadowBlur: 20,
              },
            },
          },
          {
            data: mrlData,
            name: "买热量",
            symbolSize: 0,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                color: "#DA5A28",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: "#DA5A28", //tooltip里点的颜色
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#DA5A2880",
                    },
                    {
                      offset: 1,
                      color: "#DA5A2800",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)",
                shadowBlur: 20,
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>